<template>
	<view class="modify">
		<view class="nav-box">
			<navigator open-type="redirect" url="../changeInfo/changeInfo" class="iconfont icon-fanhui icon-box">
				
			</navigator>
			<view class="title">
				<text v-show="show1===title">修改昵称</text>
				<text v-show="show2===title">修改抖音号</text>
			</view>
		</view>
		<view class="box">
			<view class="text">
				<text v-show="show1===title">我的昵称</text>
				<text v-show="show2===title">我的抖音号</text>
			</view>
			<view class="input_name">
				<input v-show="show1===title" class="input" type="text" maxlength="20" placeholder="请输入昵称..." v-model="newName"/>
				<input v-show="show2===title" class="input" type="text" maxlength="20" placeholder="请输入抖音号..." v-model="douyinId"/>
				<icon class="iconfont icon-close-circle delete" @click="deleteInput"></icon>
				<view class="number">
					{{newName.length}}/20
				</view>
			</view>
		</view>
		<view v-show="show1===title" class="footer" @click="setStorage(newName)">
			保存
		</view>
		<view v-show="show2===title" class="footer" @click="setStorage2(douyinId)">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		// props:['title'],
		data() {
			return {
				newName:'张三',
				douyinId:'sg14853412',
				title:'',
				show1:'userName',
				show2:'douyinId'
			}
		},
		onLoad(res){
			this.title=res.title;
			console.log(this.title);
			switch(res.title){
				case "userName":
				this.getUserName();
				break;
				case "douyinId":
				this.getdouyinId();
				break;
				default:
			}
		},
		methods: {
			getdouyinId(){
				let that = this;
				uni.getStorage({
					key:'douyinId',
					success(res){
						that.douyinId=res.data;
						console.log(that.douyinId);
					}
				})
			},
			getUserName(){
				let that = this;
				uni.getStorage({
					key:'userName',
					success(res){
						that.newName=res.data;
					}
				})
			},
			deleteInput(){
				this.newName='';
				this.douyinId='';
				console.log('删除！')
			},
			setStorage2(res){
				uni.setStorage({
					key:'douyinId',
					data:res,
					success: (e) => {
						console.log('抖音success');
						console.log(e);
					}
				})
			},
			setStorage(res){
				uni.setStorage({
					key:'userName',
					data:res,
					success: (e) => {
						console.log('名字success');
						console.log(e);
					}
				})
				
			}
		}
	}
</script>

<style>
.modify{
	width: 100%;
	height: 100%;
	background-color: #000000;
}
.nav-box{
	height: 50px;
	position:relative;
	padding-top:30px;
	margin: 0 auto;
}
.icon-box{
	position:absolute;
	top:30px;
	left:10px;
	font-size: 16px;
	color:#fff;
}
.title{
	color: #fff;
	text-align: center;
}
.box{
	padding:15px;
}
.text{
	color: #999;
	font-size: 15px;
}
.input_name{
	margin-top:10px;
	font-size: 16px;
	position:relative;
	height: 20px;
}
.input{
	width:92%;
	color: #fff;
}
.delete{
	position:absolute;
	right: -1%;
	top: 0;
	width: 8%;
	height: 20px;
	font-size: 25px;
	color:#fff;
	text-align: ;
}
.number{
	font-size: 15px;
	color: #999;
	margin-top: 5px;
}
.footer{
	text-align: center;
	margin: 50px 10px 0 10px;
	font-size: 18px;
	color: #fff;
	background-color: #333;
	border-radius: 3px;
	height: 40px;
	line-height: 40px;
}
</style>
